<template>
  <div>
    <div
      class="fill-base c-title"
      style="padding: 22px 0 12px 16px; font-size: 17px"
      v-if="o.data.isShowTitle && o.data.title"
    >
      {{ o.data.title }}
    </div>
    <div
      class="house-item"
      v-for="(item, index) in o.data.limit.number"
      :key="index"
    >
      <img
        class="house-item_img"
        src="https://lbqny.migugu.com/admin/diy/default.png"
      />
      <div class="house-item_right ellipsis-2">
        <div class="house-item_title ellipsis-2">此处是房源标题</div>
        <div class="house-item_property" v-if="o.data.category_type === 0">
          户型/面积/朝向{{ o.data.isShowAddr ? '/地区' : '' }}
        </div>
        <div class="house-item_property" v-if="o.data.category_type === 1">
          <div>户型</div>
          <div>面积</div>
          <div>朝向</div>
          {{ o.data.isShowAddr ? '地区' : '' }}
        </div>
        <div
          class="house-item_property"
          v-if="o.data.category_type === 2 && o.data.isShowAddr"
        >
          地区
        </div>
        <div class="house-item_price">
          <div class="house-item_total">6888元</div>
          <div class="house-item_unit" style="color: #f61919; margin-left: 3px">
            /m²起
          </div>
        </div>
        <div class="ellipsis-2">
          <div class="htag primary" v-for="(item, index) in 3" :key="index">
            标签{{ index + 1 }}
          </div>
        </div>
      </div>
    </div>
    <div class="fill-base pd-lg" v-if="o.data.isShowMore">
      <div class="house-more-btn f-title radius-15 text-center">查看更多</div>
    </div>
    <div class="fill-body space-lg"></div>
  </div>
</template>

<script>
export default {
  name: 'houseList',
  props: {
    o: Object
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.house-item {
  background: #fff;
  padding: 17px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #f4f6f8;
}
.house-item_img {
  width: 90px;
  height: 70px;
  margin-top: 3px;
}

.house-item_right {
  flex: 1;
  margin-left: 17px;
}

.house-item_title {
  font-size: 16px;
  color: #282828;
}

.house-item_property {
  font-size: 12px;
  color: #969696;
  margin-top: 4px;
}

.house-item_property div {
  display: inline-block;
  margin-right: 5px;
}
.house-item_price {
  display: flex;
  align-items: baseline;
  margin-top: 3px;
}

.house-item_total {
  color: #f61919;
  font-size: 16px;
}

.house-item_unit {
  color: #969696;
  font-size: 12px;
  margin-left: 5px;
}

.house-head {
  height: 45px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0 17px;
}

.house-head_status {
  font-size: 23px;
  color: #fc3c3b;
  flex: 1;
}

.house-head_caption {
  color: #999999;
  font-size: 23px;
}

.house-foot {
  height: 10px;
  background: #fff;
}

.house-count {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #999999;
  font-size: 12px;
  padding: 0 17px;
}

.htag {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 15px;
  line-height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  background: #ddd;
  color: #888;
  margin-right: 5px;
}

.htag::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.htag.primary {
  color: #19c865;
  background: #e1f7ea;
}

.htag.primary.plain {
  color: #19c865;
  background: transparent;
}

.htag.primary::after {
  border-color: #e1f7ea;
}
.house-more-btn {
  height: 48px;
  line-height: 48px;
  margin: 0 auto;
  background: #eafff3;
  color: #12c95f;
}
</style>
